<script setup lang="ts">
import {
  NavigationMenu,
  NavigationMenuItem,
  NavigationMenuLink,
  NavigationMenuList,
  navigationMenuTriggerStyle
} from "~/components/ui/navigation-menu";
import {Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle, SheetTrigger} from "~/components/ui/sheet";

const colorMode: any = useColorMode()

type TypeLinks = {
  title: string,
  link: string,
}

const links = ref<TypeLinks[]>([
  {
    title: 'На главную',
    link: '/'
  },
  {
    title: 'Личный кабинет',
    link: '/cabinet'
  },
  {
    title: 'Все туры',
    link: '/tours'
  },
])

console.log(colorMode)

</script>

<template>
    <header class="flex justify-between items-center py-3 container mx-auto my-0">
      <NuxtLink to="/"><img src="/images/logotype.svg" alt="logo" class="logotype"></NuxtLink>
      <NavigationMenu class="max-md:hidden">
        <NavigationMenuList>
          <NavigationMenuItem v-for="link in links" :key="link.title">
            <NuxtLink :to="link.link">
              <NavigationMenuLink :class="navigationMenuTriggerStyle()">
                {{link.title}}
              </NavigationMenuLink>
            </NuxtLink>
          </NavigationMenuItem>
<!--          <ClientOnly>-->
<!--            <NavigationMenuItem>-->
<!--              <Icon name="line-md:moon-filled-to-sunny-filled-transition" v-if="colorMode.value == 'dark'" @click="colorMode.preference='light'" size="24px" class="cursor-pointer" />-->
<!--              <Icon name="line-md:sunny-filled-loop-to-moon-filled-transition" v-if="colorMode.value == 'light'" @click="colorMode.preference='dark'" size="24px" class="cursor-pointer"/>-->
<!--            </NavigationMenuItem>-->
<!--          </ClientOnly>-->
        </NavigationMenuList>
      </NavigationMenu>

      <Sheet>
        <SheetTrigger class="md:hidden">
          <IconCSS name="line-md:close-to-menu-alt-transition" size="2rem" />
        </SheetTrigger>
        <SheetContent>
          <SheetHeader>
            <SheetTitle>Навигация</SheetTitle>
          </SheetHeader>
          <div class="flex flex-col gap-5 items-end justify-end w-full">
            <NuxtLink :to="link.link" class="w-full text-end" v-for="link in links" :key="link.title">
              <NavigationMenuLink :class="navigationMenuTriggerStyle()" class="w-full text-end text-3xl">
                {{link.title}}
              </NavigationMenuLink>
            </NuxtLink>
          </div>
        </SheetContent>
      </Sheet>
    </header>
</template>

<style scoped>
.logotype {
  height: 6rem;
}
</style>